<!DOCTYPE html>
<html>
<head>
   <title>CSS Animations - animation events and multiple animations</title>
   <link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
   <link rel="help" href="http://dev.w3.org/csswg/css3-animations/#animation-events-">
   <meta name="flags" content="dom">
   <meta name="assert" content="For the purposes of events, each animation-name
   specifies a single animation">
   <script src="/resources/testharness.js"></script>
   <script src="/resources/testharnessreport.js"></script>
   <style type="text/css">
      @keyframes grow {
         from {
            width: 100px;
            height: 100px;
         }
         to {
            width: 200px;
            height: 200px;
         }
      }
      @keyframes move {
         from {
            left: 0px;
         }
         to {
            left: 100px;
         }
      }
      div {
         width: 100px;
         height: 100px;
         background: blue;
      }
      .test {
         animation: grow 0.4s, move 0.4s;
      }
   </style>
   <script type="text/javascript">
      setup({explicit_done:true});
      onload = function() {
         var testName = document.querySelector('title').firstChild.data;
         var div = document.querySelector('div');
         var log = document.querySelectorAll('p')[0].firstChild;
         var growStartCount = 0;
         var growEndCount = 0;
         var moveStartCount = 0;
         var moveEndCount = 0;
         div.addEventListener('animationstart', function(evt) {
            growStartCount += (evt.animationName == 'grow' ? 1 : 0);
            moveStartCount += (evt.animationName == 'move' ? 1 : 0);
         });
         div.addEventListener('animationend', function(evt) {
            growEndCount += (evt.animationName == 'grow' ? 1 : 0);
            moveEndCount += (evt.animationName == 'move' ? 1 : 0);
         });
         var timeout = setTimeout(function() {
            var passed = (growStartCount == 1 && growEndCount == 1
                          && moveStartCount == 1 && moveEndCount == 1);
            test(function(){assert_true(passed);}, testName); done();
            log.data = passed ? 'PASS' : 'FAIL';
         }, 800);
         div.className = 'test';
      };
   </script>
   <style>iframe{display:none}</style>
</head>
<body>
   <p>Testing... (JavaScript required)</p>
   <div></div>
</body>
</html>
